import React from 'react';
import * as echarts from 'echarts';


function Thrre(props) {

    setTimeout(() => {
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;
        
        const spirit =
          'image://';
        var maxData = 2000;
        option = {
          tooltip: {},
          xAxis: {
            max: maxData,
            splitLine: { show: false },
            offset: 10,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              margin: 10
            }
          },
          yAxis: {
            data: ['2013', '2014', '2015', '2016'],
            inverse: true,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              margin: 10,
              color: '#999',
              fontSize: 16
            }
          },
          grid: {
            top: 'center',
            height: 200,
            left: 70,
            right: 100
          },
          series: [
            {
              // current data
              type: 'pictorialBar',
              symbol: spirit,
              symbolRepeat: 'fixed',
              symbolMargin: '5%',
              symbolClip: true,
              symbolSize: 30,
              symbolBoundingData: maxData,
              data: [891, 1220, 660, 1670],
              markLine: {
                symbol: 'none',
                label: {
                  formatter: 'max: {c}',
                  position: 'start'
                },
                lineStyle: {
                  color: 'green',
                  type: 'dotted',
                  opacity: 0.2,
                  width: 2
                },
                data: [
                  {
                    type: 'max'
                  }
                ]
              },
              z: 10
            },
            {
              // full data
              type: 'pictorialBar',
              itemStyle: {
                opacity: 0.2
              },
              label: {
                show: true,
                formatter: function (params) {
                  return ((params.value / maxData) * 100).toFixed(1) + ' %';
                },
                position: 'right',
                offset: [10, 0],
                color: 'green',
                fontSize: 18
              },
              animationDuration: 0,
              symbolRepeat: 'fixed',
              symbolMargin: '5%',
              symbol: spirit,
              symbolSize: 30,
              symbolBoundingData: maxData,
              data: [891, 1220, 660, 1670],
              z: 5
            }
          ]
        };
        // Make dynamic data.
        function random() {
          return +(Math.random() * (maxData - 10)).toFixed(1);
        }
        setInterval(function () {
          const dynamicData = [random(), random(), random(), random()];
          myChart.setOption({
            series: [
              {
                data: dynamicData.slice()
              },
              {
                data: dynamicData.slice()
              }
            ]
          });
        }, 3000);
        
        option && myChart.setOption(option);
        
    }, 200);

    return (
        <div>
            <div id="main3" style={{width:400,height:270}}></div>
            
        </div>
    );
}

export default Thrre;